<template>
	<view class="container">
		<!-- 顶部用户信息区域 -->
		<view class="user-section">
			<view class="user-info">
				<image :src="avatarImg" class="avatar"></image>
				<view class="user-detail">
					<text class="nickname">{{nickname}}</text>
				</view>
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<view class="function-section">
			<view class="function-card" @click="goUserAppointHis">
				<view class="function-icon">
					<u-icon name="order" color="#6c8eef" size="40"></u-icon>
				</view>
				<view class="function-content">
					<text class="function-title">咨询历史</text>
					<text class="function-desc">查看您的心理咨询历史</text>
				</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>

			<view class="function-card" @click="userDetail()">
				<view class="function-icon">
					<u-icon name="account" color="#6c8eef" size="40"></u-icon>
				</view>
				<view class="function-content">
					<text class="function-title">个人信息</text>
					<text class="function-desc">查看自己的详细个人信息</text>
				</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>

			<view class="function-card" @click="testPickerShow=true">
				<view class="function-icon">
					<u-icon name="file-text-fill" color="#6c8eef" size="40"></u-icon>
				</view>
				<view class="function-content">
					<text class="function-title">问卷记录</text>
					<text class="function-desc">查看您的心理测评记录</text>
				</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
		</view>

		<!-- 问卷选择器 -->
		<u-picker immediateChange=true @cancel="this.testPickerShow = false" @confirm="testPickerConfirm" :show="testPickerShow" :columns="testColumns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarImg: '/static/logo.png',
				nickname: '默认用户昵称',
				testPickerShow: false,
				testColumns: [
					["综合测试", "孤独测试", "焦虑测试"]
				]
			}
		},
		onShow() {
			try {
				let userinfo = uni.getStorageSync('uni-id-pages-userInfo') || {}
				
				// 增加空值保护
				if (userinfo?.avatar_file?.url) {
					uniCloud.getTempFileURL({
						fileList: [userinfo.avatar_file.url]
					}).then((res) => {
						this.avatarImg = res.fileList?.[0]?.tempFileURL || '/static/logo.png'
					}).catch(() => {
						this.avatarImg = '/static/logo.png'
					})
				}
				
				this.nickname = userinfo.nickname || '默认用户昵称'
			} catch (e) {
				console.error('用户信息读取失败', e)
				this.avatarImg = '/static/logo.png'
				this.nickname = '默认用户昵称'
			}
		},
		methods: {
			goUserAppointHis() {
				uni.navigateTo({
					url: '/pages/userInfo/user_appoint'
				})
			},
			userDetail() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			},
			testPickerConfirm(e) {
				console.log(e);
				this.testPickerShow = false;
				const path = `/pages/userInfo/testResultHistory?testId=${e.indexs[0]+1}`;
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.user-section {
		background: linear-gradient(135deg, #6c8eef, #a1c4fd);
		padding: 40rpx 30rpx;
		border-radius: 0 0 30rpx 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;

		.user-info {
			display: flex;
			align-items: center;
			padding: 20rpx 0;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.8);
				margin-right: 30rpx;
			}

			.user-detail {
				.nickname {
					font-size: 36rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}
	}

	.function-section {
		padding: 0 30rpx;
	}

	.function-card {
		display: flex;
		align-items: center;
		background: white;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(108, 142, 239, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.2);
		}

		.function-icon {
			width: 80rpx;
			height: 80rpx;
			background: rgba(108, 142, 239, 0.1);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}

		.function-content {
			flex: 1;

			.function-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}

			.function-desc {
				font-size: 24rpx;
				color: #666;
				display: block;
				line-height: 1.4;
			}
		}
	}
</style>